<template>
  <div>
    <el-button @click="clearFilter">清除筛选</el-button>
    <el-table
    ref="filterTable"
    :data="complaintData"
    style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="店铺 ID:">
              <span>{{ props.row.shore_id }}</span>
            </el-form-item>
            <el-form-item label="店铺名称:">
              <span>{{ props.row.shore_value}}</span>
            </el-form-item>
            <el-form-item label="店铺地点:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="店铺电话:">
              <span>{{ props.row.TEL }}</span>
            </el-form-item>
            <el-form-item label="投诉人 ID:">
              <span>{{ props.row.user_id }}</span>
            </el-form-item>
            <el-form-item label="投诉人账号昵称:">
              <span>{{ props.row.uname }}</span>
            </el-form-item>
            <el-form-item label="投诉人姓名:">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="投诉人电话:">
              <span>{{ props.row.complain_phone }}</span>
            </el-form-item>
            <el-form-item label="投诉时间：">
              <span>{{ props.row.complain_time }}</span>
            </el-form-item>
            <el-form-item label="投诉事件：">
              <span>{{ props.row.contents }}</span>
            </el-form-item>
            <el-form-item label="投诉证据：">
                <el-image
                style="width: 100px; height: 100px"
                :src="props.row.proofimg ? props.row.proofimg : url"
                fit="contain">
                </el-image>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="编号"
        type="index"
        align="center"
        >
      </el-table-column>
      <el-table-column
        label="店铺名称"
        prop="shore_value"
        align="center"
        column-key="shore_value"
        :filters= filter
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        label="投诉时间"
        prop="complain_time"
        align="center">
      </el-table-column>
      <el-table-column
        label="投诉事件"
        prop="contents"
        align="center">
      </el-table-column>
      <el-table-column
        v-if="!resertype == 0"
        label="处理因素"
        prop="cause"
        align="center">
      </el-table-column>
      <el-table-column  align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="resertype == 2 || resertype == 0" type="primary" icon="el-icon-s-shop" circle  @click="reviseType(scope.row,1)"></el-button>
          <el-button v-if="resertype == 1 || resertype == 0" type="warning" icon="el-icon-s-custom"  circle  @click="reviseType(scope.row,2)"></el-button>
        </template>           
      </el-table-column>
    </el-table>
    <!-- 原因 -->
    <el-dialog title="具体因素" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="cause">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入具体因素"
            v-model="form.cause">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import httpApi from "@/http";

  export default {
    props: {
      resertype: Number,
    },
    data(){
        return{
          complaintData:[],
          url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          filter:[],
          dialogFormVisible:false,
          form:{
            type:'',
            id:'',
            cause:'',
          },
          rules: {
            cause: [
              { required: true, message: '请输入具体因素', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到 200 个字符', trigger: 'blur' }
            ],
          },
        }
    },
  methods:{
      //筛选
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      
      // 修改类型
      reviseType(row,num){
        this.form.id = row.complain_id
        this.form.type = num
        this.dialogFormVisible = true
      },
      submitForm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            let params = {type: this.form.type, cause: this.form.cause , complain_id: this.form.id }
            httpApi.complaintApi.reviseCpmplaintType(params).then(res =>{
              if(res.data.code === 200 && res.data.msg === 'ok'){
                if(this.form.type === 1){
                  this.$message({
                    message: '修改成店铺因素',
                    type: 'success'
                  });
                  this.$router.push(`/home/Complaint-store`)
                }else if(this.form.type === 2){
                  this.$message({
                    message: '修改成用户因素',
                    type: 'success'
                  });
                  this.$router.push(`/home/complaint-user`)
                }
              }else{
                this.$message({
                  showClose: true,
                  message: '失败',
                  type: 'error'
                });
              }
            })
          }else {
            this.$message({
              showClose: true,
              message: '失败',
              type: 'error'
            });
          }
        })
      },
      resetForm(form) {
        this.$refs[form].resetFields();
        this.dialogFormVisible = false
      },
    
     // 封装管理投诉
      listComplaint(){
        let params = {type:this.resertype}
        httpApi.complaintApi.listComplaint(params).then(res =>{
          // console.log("列表",res);
          this.complaintData = res.data.result
        })
      },
  },
    
    mounted(){
       this.listComplaint()
       let params = {type:this.resertype}
       httpApi.complaintApi.SelectComplaintStore(params).then(res =>{
        this.filter = res.data.results.map( item =>{
          return{
            text: item.shore_value,
            value:item.shore_value
          }
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-tooltip__popper {
  max-width: 60px;
}


</style>